<template>
  <div class="main">
    <h1>{{ msg }}</h1>
    <div class = "frame">
        <div class = "outFrame">
          <NumberBlock class = "numberBlockChild" v-for="(numBerBlockFrame, index) in blockNums" :key="index" 
          :toNumberBlockNum = numBerBlockFrame>
          </NumberBlock>
        </div>
    </div>
  </div>
</template>

<script>
import NumberBlock from './NumberBlock.vue';
export default {
  name: 'MainFrame',
  components : {
     NumberBlock
  },
  data () {
    return {
      // outFrame: 16,
      msg: 'Welcome to 2048',
      blockNums:[],//方块初始值
    }
  },

  mounted() {
    window.addEventListener('keydown', this.computerNum);
  },

  created() {
    this.$data.blockNums = this.initBlockNum;
  },

  computed : {
    //单个方块新数字随机生成初始化
    getInitBlockNum() {
      var random = Math.random(); // 生成0到1之间的随机小数
      console.log(random);
      return random > 0.3 ? 2 : 4; //调整方块2和4之间的概率70%是2
    },

    //初始化方块的数量和第一个方块的值
    initBlockNum() {
      var blockNumArray = new Array();
      for (var i = 1; i <= 16; i++) {
        blockNumArray.push(0)
      }

      // 设置最小值和最大值
      const min = 0; // 最小值为0
      const max = 15; // 最大值为16
      
      // 生成随机整数
      const randomInt = Math.floor(Math.random() * (max - min + 1)) + min;
      blockNumArray.splice(randomInt, 1, this.getInitBlockNum);
      return blockNumArray;
    },
    
   
  },

  /**
   *  0   1   2   3
   *  4   5   6   7
   *  8   9   10  11
   *  12  13  14  15
   */
  methods : {
    computerNum(event) {
      // console.log("点击了键盘", event.key)
      // if (event.key === 'Enter') {
      //   console.log('Enter');
      // }

      /**
       * 上下方块相等，累加
       * 上下方块不等，不动
      **/
        if (!(event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
          return;
        }

      const newBlockNums = this.$data.blockNums;
      // console.log('移动前所有方块数字'+this.$data.blockNums);
     
          // 下箭头
        if (event.key === 'ArrowDown') {
          console.log('下箭头' + 'ArrowDown');
          for (var m = 0; m <4; m++) {
            for (var i = 15; i >= 0; i-- ) {
                if (i < 4) continue;
                const downBlockNum = newBlockNums[i];
                const upBlockNum = newBlockNums[i - 4];

                //方块数字相同
                if (downBlockNum === upBlockNum) {
                  this.addTowBlockNumDown(newBlockNums, i);
                } else {//方块数字不相同
                  //如果下面方块数字为0则累加到下面方块，上面方块置0
                  if (downBlockNum === 0 && upBlockNum > 0) {
                    this.addTowBlockNumDown(newBlockNums, i);
                  }
                }
              }
          }
        }
        //上箭头
        if (event.key === 'ArrowUp') {
          console.log('上箭头' + 'ArrowUp');
          for (var m = 0; m <4; m++) {
            for (var up = 0; up < 16; up++ ) {
                if (up > 11) continue;//最后一排不做处理
                const upBlockNum = newBlockNums[up];
                const downBlockNum = newBlockNums[up + 4];

                //方块数字相同
                if (downBlockNum === upBlockNum) {
                  this.addTowBlockNumUp(newBlockNums, up);
                } else {//方块数字不相同
                  //如果上面方块数字为0则累加到上面方块，下面方块置0
                  if (upBlockNum === 0 && downBlockNum > 0) {
                    this.addTowBlockNumUp(newBlockNums, up);
                  }
                }
              }
          }
        }
        //左箭头
        if (event.key === 'ArrowLeft') {
          console.log('左箭头' + 'ArrowLeft');
          for (var m = 0; m <4; m++) {
            for (var i = 0; i < 16; i++ ) {
                if (i === 3 || i === 7 || i === 11 || i === 15) continue;//最后一列不做处理
                const rightBlockNum = newBlockNums[i + 1] ;
                const leftBlockNum = newBlockNums[i];

                //方块数字相同
                if (leftBlockNum === rightBlockNum) {
                  this.addTowBlockNumLeft(newBlockNums, i);
                } else {//方块数字不相同
                  //如果左面方块数字为0则累加到左面方块，右面方块置0
                  if (leftBlockNum === 0 && rightBlockNum > 0) {
                    this.addTowBlockNumLeft(newBlockNums, i);
                  }
                }
              }
          }
        }
        //右箭头
        if (event.key === 'ArrowRight') {
          console.log('右箭头' + 'ArrowRight');
          for (var m = 0; m <4; m++) {
            for (var i = 0; i < 16; i++ ) {
                if (i === 0 || i === 4 || i === 8 || i === 12) continue;//第一列不做处理
                const rightBlockNum = newBlockNums[i];
                const leftBlockNum = newBlockNums[i - 1];

                //方块数字相同
                if (leftBlockNum === rightBlockNum) {
                  this.addTowBlockNumRight(newBlockNums, i);
                } else {//方块数字不相同
                  //如果左面方块数字为0则累加到左面方块，右面方块置0
                  if (rightBlockNum === 0 && leftBlockNum > 0) {
                    this.addTowBlockNumRight(newBlockNums, i);
                  }
                }
              }
          }
        }

        //延迟200ms生成新方块数字，增加体验
        setTimeout(() => {
          this.getNewBlockNum()
        }, 260);    
      
      this.$data.blockNums = newBlockNums;
      // console.log('移动后所有方块数字'+this.$data.blockNums);
    },

    //随机生成一个新的方块值
   getNewBlockNum() {
      const existNumBlockIndexArray = new Array();//没有数字的方块，还可以重新生成数字
      for (var index = 0; index <= this.$data.blockNums.length - 1; index++) {
        if (this.$data.blockNums[index] > 0) continue;
        existNumBlockIndexArray.push(index);
      }
      // console.log('剩余空白方块'+ existNumBlockIndexArray);
      const min = 0;
      const max = existNumBlockIndexArray.length - 1;
      const randomInt = Math.floor(Math.random() * (max - min + 1)) + min;
      this.$data.blockNums.splice(existNumBlockIndexArray[randomInt], 1, this.getInitBlockNum);
    },

    //下箭头，置空上面方块，累加到下面方块
    addTowBlockNumDown(array, index) {
      array.splice(index, 1, array[index] + array[index - 4]);//累加到下面方块
      array.splice(index - 4, 1, 0);//上面方块置为0
    },

    //上箭头，置空下面方块，累加到上面方块
    addTowBlockNumUp(array, index) {
      array.splice(index, 1, array[index] + array[index + 4]);//累加到上面方块
      array.splice(index + 4, 1, 0);//下面方块置为0
    },

    //右箭头，置空右边方块，累加到左方块
    addTowBlockNumRight(array, index) {
      array.splice(index, 1, array[index] + array[index - 1]);//累加到右面方块
      array.splice(index - 1, 1, 0);//左面方块置为0
    },

    //左箭头，置空左边方块，累加到右方块
    addTowBlockNumLeft(array, index) {
      array.splice(index, 1, array[index] + array[index + 1]);//累加到左面方块
      array.splice(index + 1, 1, 0);//右面方块置为0
    },

    sleep(ms) {
      return new Promise(reslove => setTimeout(reslove, ms));
    }
  }
  
}
</script>

<style scoped>
.frame {
  margin-top: 4%;
  height: 600px;
  border: 1px solid black ;
}
.outFrame {
  background : rgb(241, 196, 205);
  margin: auto; /* 水平居中 */
  width:480px;  
  margin-top: 4%;
  height: 80%;
  border: 1px solid black ;
  border-radius:5px;
}
.numberBlockChild{  
  /* visibility: hidden; */
}
</style>
